<template>
  <div>
    <a-card title="考场标签打印" :bordered="false">
      <a-form layout="inline" :form="form" @submit="handleSubmit">
        <a-form-item label="校区">
          <a-select
            v-decorator="['campus', { rules: [{ required: true, message: '请选择校区' }] }]"
            @change="handleCampusChange"
          >
            <a-select-option value="main">主校区</a-select-option>
            <a-select-option value="south">南校区</a-select-option>
            <a-select-option value="north">北校区</a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="教学楼">
          <a-select
            v-decorator="['building', { rules: [{ required: true, message: '请选择教学楼' }] }]"
            @change="handleBuildingChange"
          >
            <a-select-option v-for="b in buildings" :key="b.id" :value="b.id">
              {{ b.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="教室">
          <a-select
            v-decorator="['room', { rules: [{ required: true, message: '请选择教室' }] }]"
          >
            <a-select-option v-for="r in rooms" :key="r.id" :value="r.id">
              {{ r.name }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item>
          <a-button type="primary" html-type="submit">查询</a-button>
        </a-form-item>
      </a-form>

      <a-divider />

      <div style="margin-bottom: 16px">
        <a-button type="primary" @click="handlePrint" :disabled="!selectedExam">
          <a-icon type="printer" />打印考场标签
        </a-button>
        <a-button style="margin-left: 10px" @click="handlePrintAll" :disabled="examList.length === 0">
          <a-icon type="printer" />批量打印
        </a-button>
      </div>

      <a-table
        :columns="columns"
        :dataSource="examList"
        :pagination="pagination"
        :loading="loading"
        :rowSelection="rowSelection"
        @change="handleTableChange"
      >
        <span slot="action" slot-scope="text, record">
          <a @click="handlePreview(record)">预览</a>
        </span>
      </a-table>

      <a-modal
        title="考场标签预览"
        :visible="previewVisible"
        @ok="handlePreviewOk"
        @cancel="handlePreviewCancel"
        width="60%"
      >
        <div v-if="currentExam" class="label-preview">
          <h3>{{ currentExam.examName }}</h3>
          <p>考试时间: {{ currentExam.examTime }}</p>
          <p>考场: {{ currentExam.room }}</p>
          <p>班级: {{ currentExam.className }}</p>
          <p>人数: {{ currentExam.studentCount }}</p>
          <p>监考教师: {{ currentExam.teachers }}</p>
          <div class="barcode-placeholder">[条形码位置]</div>
        </div>
      </a-modal>
    </a-card>
  </div>
</template>

<script>
const columns = [
  {
    title: '考试名称',
    dataIndex: 'examName',
    key: 'examName'
  },
  {
    title: '考试时间',
    dataIndex: 'examTime',
    key: 'examTime'
  },
  {
    title: '考场',
    dataIndex: 'room',
    key: 'room'
  },
  {
    title: '班级',
    dataIndex: 'className',
    key: 'className'
  },
  {
    title: '人数',
    dataIndex: 'studentCount',
    key: 'studentCount'
  },
  {
    title: '监考教师',
    dataIndex: 'teachers',
    key: 'teachers'
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' }
  }
]

const examList = [
  {
    key: '1',
    examName: '高等数学（上）	期末考试',
    examTime: '2023-06-10 09:00-11:00',
    room: '1号教学楼201',
    className: '计算机2101班',
    studentCount: 45,
    teachers: '王芳, 李廷'
  },
  {
    key: '2',
    examName: 'PLC与工业控制技术期末考试',
    examTime: '2023-06-12 14:00-16:00',
    room: '1号教学楼202',
    className: '计算机2101班',
    studentCount: 45,
    teachers: '王雪, 陈立伟'
  },
  {
    key: '3',
    examName: '数据结构期末考试',
    examTime: '2023-06-15 09:00-11:00',
    room: '1号教学楼203',
    className: '计算机2101班',
    studentCount: 45,
    teachers: '张明华, 孙老师'
  }
]

const buildings = [
  { id: '1', name: '1号教学楼' },
  { id: '2', name: '2号教学楼' },
]

const rooms = [
  { id: '101', name: '101' },
  { id: '102', name: '102' },
  { id: '201', name: '201' },
  { id: '202', name: '202' },
  { id: '203', name: '203' }
]

export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      columns,
      examList: [],
      buildings,
      rooms,
      loading: false,
      pagination: {
        pageSize: 10
      },
      selectedRowKeys: [],
      previewVisible: false,
      currentExam: null
    }
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange
      }
    },
    selectedExam() {
      return this.selectedRowKeys.length === 1 
        ? this.examList.find(item => item.key === this.selectedRowKeys[0])
        : null
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('查询条件:', values)
          this.loading = true
          // 模拟异步查询
          setTimeout(() => {
            this.examList = examList
            this.loading = false
            this.$message.success('查询成功')
          }, 800)
        }
      })
    },
    handleCampusChange(value) {
      console.log('校区:', value)
      this.form.setFieldsValue({ building: undefined, room: undefined })
    },
    handleBuildingChange(value) {
      console.log('教学楼:', value)
      this.form.setFieldsValue({ room: undefined })
    },
    handleTableChange(pagination, filters, sorter) {
      console.log(pagination, filters, sorter)
    },
    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    handlePrint() {
      this.$message.info(`打印考场标签: ${this.selectedExam.examName}`)
    },
    handlePrintAll() {
      this.$message.info(`批量打印${this.selectedRowKeys.length}个考场标签`)
    },
    handlePreview(record) {
      this.currentExam = record
      this.previewVisible = true
    },
    handlePreviewOk() {
      this.previewVisible = false
    },
    handlePreviewCancel() {
      this.previewVisible = false
    }
  }
}
</script>

<style scoped>
.label-preview {
  padding: 20px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff;
}

.barcode-placeholder {
  height: 60px;
  margin-top: 20px;
  background: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #999;
}
</style>